<template>
  <view class="container p-b-80">
    <view class="statusInfo" v-if="orderDetail.order_status == 0">
      <view class="font-44 text-bold c-origin">待付款</view>
      <view class="c-78">继续付款</view>
      <image :src="$util.img('image/status_icon.png')" mode="" :lazy-load="true"></image>
    </view>
    <view class="statusInfo" v-if="orderDetail.order_status == 2">
      <view class="font-44 text-bold color-title2">配送中</view>
      <view class="c-78">您的餐品已准备好</view>
      <image :src="$util.img('image/status_icon6.png')" mode="" :lazy-load="true"></image>
    </view>
    <view class="statusInfo" v-if="orderDetail.order_status == 10">
      <view class="font-44 text-bold">已完成</view>
      <view class="c-8d">当前订单已完成，谢谢惠顾</view>
      <image :src="$util.img('image/status_icon4.png')" mode="" :lazy-load="true"></image>
    </view>
    <view class="statusInfo" v-if="orderDetail.order_status == -1">
      <view class="font-44 text-bold">已关闭</view>
      <view class="c-8d">当前订单已关闭</view>
      <image :src="$util.img('image/status_icon4.png')" mode="" :lazy-load="true"></image>
    </view>

    <view class="boxPanel" v-if="orderDetail.order_status !== 0 && orderDetail.order_status !== -1">
      <view class="text-bold m-b-30 flex-center">订单码</view>
      <view class="flex-center">
        <text
          class="nums"
          :class="{ nums_dis: orderDetail.order_status == 10 }"
          v-for="(num, index) in pickupCodeArray"
          :key="index"
          >{{ num }}</text
        >
      </view>
    </view>

    <view class="boxPanel" v-if="orderDetail.order_type !== 1">
      <view class="flex-y-center m-b-14">
        <text class="font-30 text-bold">{{ orderDetail.canteen_name }}</text>
        <u-icon name="arrow-right" size="16" color="#1C274C"></u-icon>
      </view>
      <view class="flex-x-between m-b-20" style="align-items: baseline">
        <!-- style="width:62%;" -->
        <view class="c-60 font-26">
          {{ orderDetail.delivery_store_info.full_address }}
        </view>
        <!-- <view class="flex-y-center">
          <u-icon name="map" color="#8D93A5" size="14"></u-icon>
          <text class="c-60 font-26 m-l-6">距您{{orderDetail.distance}}km</text>
        </view> -->
      </view>
    </view>

    <view class="addressEmpty boxPanel" v-else>
      <image :src="$util.img('/image/map.png')" mode="" class="mapimg"></image>
      <view style="width: 80%">
        <view class="font-30 text-bold">{{ orderDetail.name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ orderDetail.mobile }}</view>
        <view class="c-74 font-weight-5 address"> {{ orderDetail.full_address }}{{ orderDetail.address }} </view>
      </view>
    </view>

    <view class="boxPanel p-20 m-l-24 m-r-24 m-b-24">
      <view class="goodsInfo" v-for="item in orderDetail.order_goods" :key="item.id">
        <image :src="$util.img(item.sku_image)" mode="aspectFill" lazy-load></image>
        <view class="right">
          <view class="name ellipsis-2">{{ item.sku_name }}</view>
          <view class="font-32 flex-x-between">
            <text class="c-78">x{{ item.num }}</text>
            <text>¥{{ item.price }}</text>
          </view>
        </view>
      </view>
      <view class="flex-x-between m-t-20">
        <view class="c-60">共计 {{ orderDetail.goods_num }} 件商品</view>
        <view class="c-60 flex-y-baseline">
          合计金额
          <view class="color-title2 text-bold font-26 flex-y-baseline"
            ><text class="font-24">￥</text>{{ orderDetail.order_money }}</view
          >
        </view>
      </view>
    </view>

    <view class="boxPanel m-l-24 m-r-24 m-b-24 radius-20 p-20">
      <view class="flex-between m-t-22">
        <view class="c-78">订单编号</view>
        <view class="flex-y-center">
          {{ orderDetail.order_no }}
          <text class="color-title2 m-l-10" @click="copyTxt(orderDetail.order_no)">复制</text>
        </view>
      </view>
      <view class="flex-between m-t-22">
        <view class="c-78">创建时间</view>
        <view class="flex-y-center">
          {{ $util.timeStampTurnTime(orderDetail.create_time) }}
        </view>
      </view>
      <view class="flex-between m-t-22">
        <view class="c-78">就餐方式</view>
        <view class="flex-y-center">
          {{ orderDetail.order_type_name }}
        </view>
      </view>
      <view class="flex-between m-t-22" v-if="orderDetail.pay_status > 0">
        <view class="c-78">付款金额</view>
        <view class="flex-y-center"> ¥{{ orderDetail.pay_money }} </view>
      </view>
      <!-- <view class="flex-between m-t-22">
        <view class="c-78">赠送积分</view>
        <view class="flex-y-center">
          +{{orderDetail.son_score}}积分
        </view>
      </view> -->
      <view class="flex-between m-t-22" v-if="orderDetail.pay_status > 0">
        <block>
          <view class="c-78">支付方式</view>
          <view class="flex-y-center">
            {{ orderDetail.pay_type_name }}
          </view>
        </block>
      </view>
      <view class="flex-between m-t-22" v-if="orderDetail.pay_status > 0">
        <view class="c-78">支付时间</view>
        <view class="flex-y-center">
          {{ $util.timeStampTurnTime(orderDetail.pay_time) }}
        </view>
      </view>
      <view class="flex-between m-t-22" v-if="orderDetail.coupon_money > 0">
        <view class="c-78">优惠券</view>
        <view class="flex-y-center c-origin text-bold"> -￥{{ orderDetail.coupon_money }} </view>
      </view>
      <view class="flex-between m-t-22">
        <view class="c-78">订单备注</view>
        <view class="flex-y-center">
          {{ orderDetail.buyer_message }}
        </view>
      </view>
    </view>

    <!-- 固定底部——提交订单 -->
    <view class="dianzi"></view>
    <view class="fixfooter flex-between" v-if="orderDetail.pay_status == 0 && orderDetail.order_status == '0'">
      <view class="">
        <view class="font-24 c-8d">共 {{ orderDetail.goods_num }} 件 需支付</view>
        <view class="money c-origin text-bold font-52 flex" style="align-items: baseline">
          <i class="font-28 c-origin">￥</i>{{ orderDetail.pay_money }}
        </view>
      </view>
      <view class="flex">
        <view class="submit submit_pin" @click="cancelOrder(orderDetail.order_id, '', 'detail')">取消订单</view>
        <view class="submit" @click="payOrder(orderDetail.out_trade_no, 'detail')">立即支付</view>
      </view>
    </view>

    <!-- 引入支付弹窗 -->
    <!-- <pay :show="showPay" @close="closePay" :orderNo="order_id" :storeMoney="storeMoney" :money="total_pay_money" @goPay="goPay" v-if="showPay"></pay> -->
  </view>
</template>

<script>
// 待支付0 配送中2 订单已结算完成10  已关闭-1
import pay from "../../components/pay/pay.vue";
import orderFoodUtils from "../js/orderFoodUtils.js";
export default {
  components: {
    pay,
  },
  data() {
    return {
      orderDetail: {},
      order_id: 0,
      //支付弹窗数据
      showPay: false,
      total_pay_money: 0,
      payment_method: "",
      storeMoney: 0,
      // 添加取件码数组
      pickupCodeArray: [],
    };
  },
  mixins: [orderFoodUtils],
  onLoad(e) {
    this.order_id = e.order_id || 0;
  },
  onShow() {
    this.getOrderDetail();
  },
  methods: {
    closePay() {
      this.showPay = false;
    },
    openPay() {
      this.getStoreSetInfo(this.orderDetail.shop_id);
      this.showPay = true;
    },
    getStoreSetInfo(shop_id) {
      this.$api.sendRequest({
        url: "/api/v1/shop/getConfig",
        data: {
          shop_id: shop_id,
        },
        success: (res) => {
          if (res.code == 1) {
            this.storeMoney = res.data.shop_money;
          } else {
            this.$util.showToast({
              title: res.msg,
            });
          }
        },
      });
    },
    goPay(e) {
      this.showPay = false;
      this.payment_method = e;
      this.payFoodOrder(this.order_id, "detail");
    },
    makePhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },
    getOrderDetail() {
      this.$api.sendRequest({
        url: "/canteen/api/order/detail",
        data: {
          order_id: this.order_id,
        },
        success: (res) => {
          if (res.code == 0) {
            this.orderDetail = res.data;
            if (this.orderDetail.delivery_store_info != "")
              this.orderDetail.delivery_store_info = JSON.parse(this.orderDetail.delivery_store_info);

            // 处理取件码，假设取件码字段为pickup_code
            if (this.orderDetail.delivery_code) {
              // 将取件码拆分为单个数字数组
              this.pickupCodeArray = this.orderDetail.delivery_code.toString().split("");
            } else {
              this.pickupCodeArray = [];
            }
            // console.log(this.pickupCodeArray);
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    copyTxt(order_no) {
      this.$util.copy(order_no);
    },
  },
};
</script>

<style lang="scss" scoped>
.statusInfo {
  position: relative;
  background: #fff;
  padding: 50rpx 30rpx;
  border-radius: 0 0 20rpx 20rpx;
  image {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 274rpx;
    height: 200rpx;
  }
}
.addressEmpty {
  display: flex;
  .address {
    padding-bottom: 20rpx;
  }
}
.goodsInfo {
  display: flex;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f3f4f5;
  image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
  }
  .right {
    width: 70%;
    .name {
      height: 78rpx;
      line-height: 1.4;
      margin-bottom: 20rpx;
    }
  }
}

.zengBox {
  background: linear-gradient(180deg, #ffdcdc 0%, #fff 31.69%);
  .zengimg {
    position: absolute;
    top: 0;
    right: 0;
    width: 189rpx;
    height: 252rpx;
  }
}

.quanimg {
  width: 32rpx;
  height: 30rpx;
}

.refund_com {
  width: 140rpx;
  height: 52rpx;
  line-height: 52rpx;
  border-radius: 20rpx;
  text-align: center;
  font-size: 24rpx;
  color: #606882;
  border: 1px solid #b8bac2;
  background-color: #fff;
  box-sizing: border-box;
}

.bggray {
  background-color: #f8f9fa;
  padding: 18rpx 24rpx;
  border-radius: 20rpx;
}

.fixfooter {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  // height: 142rpx;
  z-index: 997;
  // height: calc(142rpx + env(safe-area-inset-bottom) / 2);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 20rpx);
  .submit {
    width: 164rpx;
    height: 78rpx;
    line-height: 78rpx;
    text-align: center;
    background-color: $color-title2;
    color: #fff;
    border-radius: 30rpx;
    margin-left: 30rpx;
  }
  .submit_pin {
    background-color: #fff !important;
    color: #8d93a5 !important;
    border: 1px solid #8d93a5 !important;
  }
  .submit_pin_on {
    background-color: #fff !important;
    color: $color-title2 !important;
    border: 1px solid $color-title2 !important;
  }
}

.dianzi {
  width: 100%;
  height: 150rpx;
}
.mapimg {
  width: 80rpx;
  height: 80rpx;
  flex-shrink: 0;
  margin-right: 24rpx;
}
.nums {
  display: inline-block;
  width: 67rpx;
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;
  border-radius: 20rpx;
  background: #f7f7f7;
  color: $color-title2;
  font-size: 52rpx;
  font-weight: bold;
  margin-right: 14rpx;
}
.nums_dis {
  color: #cfd0d4 !important;
}
</style>
